<template>
	<view class="content">
		<view v-if="control">
			<!-- #ifdef H5 -->
			未登陆
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view v-if="showPage">
				<view class='header'>
					<image src='https://qianxunzhimei.oss-cn-shenzhen.aliyuncs.com/banner_img1578304194025'></image>
				</view>
				<view class='content'>
					<view>申请获取以下权限</view>
					<text>获得你的公开信息(昵称，头像、地区等)</text>
				</view>	   
				 <button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="getuserinfo">
				     授权登录
				 </button>
			</view>
			<!-- #endif -->
			</view>
		<view v-else>
			<!-- #ifdef MP-WEIXIN -->
			登陆成功
			<!-- #endif -->
			<!-- #ifdef H5 -->
			登陆成功
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	//#ifdef H5
	import {
		userLogin
	} from '../../common/h5login.js'
	//#endif

	//#ifdef MP-WEIXIN
	import {
		userLogin
	} from '../../common/login.js'
	//#endif

	export default {
		data() {
			return {
				control: true,
				nickName: null,
				avatarUrl: null,
				showPage: true,
			}
		},
		onLoad() {
			//#ifdef H5
			userLogin()
			//#endif
			//#ifdef MP-WEIXIN
			if (this.$store.getters.getToken) {
				this.showPage = false
			}
			//#endif
			if (this.$store.getters.getToken) {
				this.control = false
			}
		},
		methods: {
			getuserinfo() {
				//#ifdef MP-WEIXIN
				userLogin()
				setTimeout( ()=>{
					console.log('this.$store.getters.getToken',this.$store.getters.getToken);
					if (this.$store.getters.getToken) {
						this.control = false
					}
				},2000)
				
				
				//#endif
			},
		}
	}
</script>

<style>
	page{
		
	}
	 .header {
        margin: 90rpx 0 90rpx 50rpx;
        border-bottom: 1px solid #ccc;
        text-align: center;
        width: 650rpx;
        height: 300rpx;
        line-height: 450rpx;
    }

    .header image {
        width: 200rpx;
        height: 200rpx;
    }

    .content {
        margin-left: 50rpx;
        margin-bottom: 90rpx;
    }

    .content text {
        display: block;
        color: #9d9d9d;
        margin-top: 40rpx;
    }

    .bottom {
        border-radius: 80rpx;
        margin: 70rpx 50rpx;
        font-size: 35rpx;
    }
	.shop-close{
		overflow: hidden;
		width: 100%;
	}
	.shop-close image{
		display: block;
		width: 250upx;
		height: 250upx;
		margin: 0 auto;
		margin-top: 316upx;
	}
	.shop-close text{
		display: block;
		width: 100%;
		height: 60upx;
		font-size: 28upx;
		line-height: 60upx;
		text-align: center;
		color: #999999;
	}
</style>